import React from 'react';
import 'antd/dist/antd.css'
import { Button, Input } from 'antd'
import { connect } from 'react-redux'
// import store from './store'

const stateToProps = (state) => ({
    inputValue: state.inputValue,
    list: state.list
})

const dispatchToProps = (dispatch) => ({
    inputChange(e) {
        // console.log(e.target.value)
        let action = {
            type: 'change_input',
            value: e.target.value
        }
        dispatch(action)
    },
    clickButton() {
        // console.log('111111111111')
        let action = { type: 'add_item' }
        dispatch(action)
    }
})

const TodoList = (props) => {
    let { inputValue, inputChange, clickButton, list } = props;
    return (
        <div>
            <div style={{ margin: '10px' }}>
                <Input value={inputValue} onChange={inputChange} style={{ width: '200px', marginRight: '10px' }} />
                <Button type="primary" onClick={clickButton}>提交</Button>
            </div>
            <ul>
                {/* <li>jspang</li> */}
                {
                    list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}


export default connect(stateToProps, dispatchToProps)(TodoList);